<template>
  <div class="header">
    <mu-appbar :color="background">
      <div class="logo-box">
        <img
          class="header-logo"
          src="@/assets/images/logo.png"
          @click="$router.push({ name: 'index' })"
          alt=""
        />
      </div>
      <!-- <mu-avatar slot="left" size="60" class="header-avatar">
        <img src="@/assets/images/logo.png" alt="" />
      </mu-avatar> -->
      <mu-button
        @click="go(item)"
        v-show="isPC"
        flat
        slot="right"
        v-for="(item, index) in info.menu"
        :key="item.name"
        :color="lightIndex === index ? '#00e676' : ''"
      >
        <mu-icon size="16" :value="item.icon"></mu-icon> {{ item.name }}
      </mu-button>
      <mu-button v-show="!isPC" slot="left" icon @click="toggleWapMenu(true)">
        <mu-icon value="menu"></mu-icon>
      </mu-button>
      <mu-bottom-sheet :open.sync="openWapMenu">
        <mu-list @item-click="toggleWapMenu(false)">
          <mu-list-item
            @click="go(item)"
            button
            v-for="(item, index) in info.menu"
            :key="item.name"
          >
            <mu-list-item-action>
              <mu-icon
                :value="item.icon"
                :color="lightIndex === index ? '#00e676' : ''"
              ></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title
              :style="{ color: lightIndex === index ? '#00e676' : '' }"
              >{{ item.name }}</mu-list-item-title
            >
          </mu-list-item>
        </mu-list>
      </mu-bottom-sheet>

      <mu-button flat ref="theme" slot="right" @click="openTheme = !openTheme"
        ><mu-icon value="color_lens"></mu-icon
      ></mu-button>
      <mu-popover :open.sync="openTheme" :trigger="triggerTheme">
        <mu-list>
          <mu-list-item button @click="toggleTheme('selfLight')">
            <mu-list-item-title>
              <mu-icon
                :color="me === 'selfLight' ? 'primary' : ''"
                value="brightness_7"
              ></mu-icon>
            </mu-list-item-title>
          </mu-list-item>
          <mu-list-item button @click="toggleTheme('selfDark')">
            <mu-list-item-title>
              <mu-icon
                :color="me === 'selfDark' ? 'primary' : ''"
                value="brightness_4"
              ></mu-icon>
            </mu-list-item-title>
          </mu-list-item>
        </mu-list>
      </mu-popover>

      <mu-button flat ref="button" slot="right" @click="showLoginClick">
        <span class="user" v-if="user">{{ user && user.nickName }}</span>
        <span class="user" v-else>登录</span>
        <mu-icon value="expand_more" v-show="user"></mu-icon
      ></mu-button>
      <mu-popover :open.sync="openUser" :trigger="triggerUser">
        <mu-list v-show="user">
          <mu-list-item button @click="$router.push('/user')">
            <mu-list-item-title>个人中心</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button @click="logoutClick">
            <mu-list-item-title>退出登录</mu-list-item-title>
          </mu-list-item>
        </mu-list>
      </mu-popover>
    </mu-appbar>
    <div class="tool">
      <div v-if="info.login && !user" class="tool-row">
        <mu-slide-left-transition>
          <mu-button
            @click="showLoginClick"
            v-show="showToolBtn && info.openSearch"
            fab
            color="primary"
            >登录</mu-button
          >
        </mu-slide-left-transition>
      </div>
      <div class="tool-row">
        <mu-tooltip placement="right-start" conent="登录/注册/搜索">
          <mu-button
            color="info"
            fab
            class="search-fab"
            @click="showToolBtn = !showToolBtn"
            ><mu-icon value="adb"></mu-icon
          ></mu-button>
        </mu-tooltip>
        <mu-slide-left-transition>
          <mu-button
            @click="
              openSearchModal = true
              showToolBtn = false
            "
            fab
            color="error"
            v-show="showToolBtn && info.openSearch"
            >搜索</mu-button
          >
        </mu-slide-left-transition>
      </div>
      <div v-if="info.register && !user" class="tool-row">
        <mu-slide-left-transition>
          <mu-button
            @click="showRegisterClick"
            fab
            color="warning"
            v-show="showToolBtn"
            >注册</mu-button
          >
        </mu-slide-left-transition>
      </div>
    </div>
    <RegisterForm
      :open.sync="openRegisterModal"
      :captchaReg="captchaRegisterReg"
      @toggle="toggleRegisterModal"
      @captcha="captchaRegisterClick"
    ></RegisterForm>
    <LoginForm
      :open="openLoginModal"
      :captchaReg="captchaReg"
      @toggle="toggleLoginModal"
      @captcha="captchaClick"
    ></LoginForm>
    <SearchForm
      :open="openSearchModal"
      @toggle="toggleSearchModal"
    ></SearchForm>
    <mu-slide-bottom-transition>
      <mu-tooltip placement="top" content="Top">
        <mu-button
          v-show="showBackTop"
          @click="scrollTop"
          class="back-top"
          fab
          color="secondary"
        >
          <mu-icon value="arrow_upward"></mu-icon>
        </mu-button>
      </mu-tooltip>
    </mu-slide-bottom-transition>
  </div>
</template>
<script>
import RegisterForm from '@/components/RegisterForm.vue'
import LoginForm from '@/components/LoginForm.vue'
import SearchForm from '@/components/SearchForm.vue'
const menus = [
  {
    name: "首页",
    router: "index",
    icon: "home",
  },
  {
    name: "文章",
    router: "articles",
    icon: "note_add",
  },
  {
    name: "归档",
    router: "archives",
    icon: "drafts",
  },
  {
    name: "分类",
    router: "categories",
    icon: "dns",
  },
  {
    name: "标签",
    router: "tags",
    icon: "loyalty",
  },
  {
    name: "关于",
    router: "about",
    icon: "perm_identity",
  }
]
export default {
  props: {
    lightIndex: {
      type: Number,
      default: 0
    },
    background: {
      type: String
    }
  },
  data () {
    return {
      info: {
        menu: menus,
        login: true,
        register: true,
        openSearch: true
      },
      captchaReg: '',
      captchaRegisterReg: '',
      openWapMenu: false,
      openTheme: false,
      triggerTheme: null,
      openUser: false,
      triggerUser: null,
      showToolBtn: false,
      user: JSON.parse(localStorage.getItem('user')),
      openRegisterModal: false,
      openLoginModal: false,
      openSearchModal: false,
      showBackTop: false,
      me: ""
    }
  },
  mounted () {
    this.triggerTheme = this.$refs.theme.$el;
    this.triggerUser = this.$refs.button.$el;
    window.onscroll = () => {
      if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
        this.showBackTop = true
      } else {
        this.showBackTop = false
      }
    }
    const hours = new Date().getHours();
    let defaultTheme = "";
    if (hours >= 8 && hours <= 18) {
      defaultTheme = "selfLight";
    } else {
      defaultTheme = "selfDark";
    }
    this.me = localStorage.getItem("theme") || defaultTheme;
  },
  methods: {
    toggleWapMenu (bool) {
      this.openWapMenu = bool
    },
    go (item) {
      if (this.$route.name === item.router) return
      this.$router.push({
        name: item.router
      })
    },
    toggleRegisterModal (bool) {
      this.openRegisterModal = bool
    },
    toggleLoginModal (bool) {
      this.openLoginModal = bool
    },
    toggleSearchModal (bool) {
      console.log(bool);
      this.openSearchModal = bool
    },
    scrollTop () {
      document.body.scrollIntoView({ block: 'start', behavior: 'smooth' })
    },
    toggleTheme (me) {
      this.theme.use(me)
      this.me = me
      localStorage.setItem('theme', me)
      this.openTheme = false
    },
    showLoginClick () {
      if (this.user) {
        this.openUser = !this.openUser
      } else {
        this.openLoginModal = true
        this.captchaReg = Math.random().toString().slice(2, 6)
      }
    },
    captchaClick (captcha) {
      this.captchaReg = captcha
    },
    logoutClick () {
      if (window.localStorage.getItem('token')) {
        window.localStorage.clear()
        this.$toast.success('退出成功')
        this.$router.go(0)
      }
    },
    showRegisterClick () {
      this.openRegisterModal = true
      this.showToolBtn = false
      this.captchaRegisterReg = Math.random().toString().slice(2, 6)
    },
    captchaRegisterClick (captcha) {
      this.captchaRegisterReg = captcha
    }
  },
  components: {
    RegisterForm,
    LoginForm,
    SearchForm
  }
}
</script>
<style lang="less" scoped>
.header {
  position: fixed;
  z-index: 1501;
  width: 100%;
  top: 0;
  .header-avatar {
    margin-left: 20px;
    cursor: pointer;
  }
  .logo-box {
    height: 100%;
    .header-logo {
      max-height: 64px;
      height: 1rem;
      cursor: pointer;
      vertical-align: middle;
    }
  }
}
.mu-appbar {
  .mu-flat-button {
    flex: 1;
  }
  /deep/ .mu-appbar-right {
    flex: 1;
  }
  .user {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.tool {
  position: fixed;
  left: 0;
  bottom: 2.66667rem;
  .tool-row {
    margin-top: 20px;
    height: 56px;
    .search-fab {
      margin-left: -28px;
      margin-right: 20px;
    }
  }
}
.back-top {
  position: fixed;
  right: 0.26667rem;
  bottom: 0.4rem;
  background-color: #595959;
}
</style>
